<template>

    <div class="top-filter-bar" :class="{'fixed':fixed}">
      <div class="top-filter-main">
        <div class="top-filter-body" >
          <div class="filter-column bdr"
          v-for="(filter, index) in filterOptions"
          :key="index"
          :class="filter.class" @click="showOption(filter, index)">
            <span class="filter-column-text">
              {{ filter.title }}
            </span>
            <i class="up-ico" v-if="filter.isShow !== false && activeIndex !== index"></i>
            <i class="down-ico" v-if="filter.isShow !== false && activeIndex === index"></i>
          </div>
        </div>
        <dropdown-option
        :defaultSecondActiveColumn="defaultSecondActiveColumn"
        :defaultThirdActiveColumn="thirdActiveColumn"
        @load-more="load"
        @change-data="changeData"
        v-if="optionsListObject && isOpened"
        :options-list-object="optionsListObject"
        @change-filter="changeFilterValue"
        :suidIsShow="suidIsShow"
        @change-third-column="changeThirdColumn"
        :ismemberIsShow="ismemberIsShow"
        :customPropertyWX="customPropertyWX"
        :customPropertyIsShow="customPropertyIsShow"
        :insertTime="insertTime"
        @change-time="changeTime"
        @on-item-click="onItemClick"></dropdown-option>
        <div class="top-filter-buttons" v-if="isOpened">
          <button class="cancel-button" @click="cancel">取消</button>
          <button class="confirm-button" @click="confirm">确认</button>
        </div>
      </div>
    </div>

</template>

<script>

  import dropdownOption from '../components/dropdown-option';
  import { SHOW_COVER, HIDE_COVER } from '../store/mutation-types';
  import { hideFilter } from '../lib/filter'

  export default {

   props: {
    filterOptions: {
      type : Array,
      require: true
    },
    suidIsShow: {
      type : Boolean,
      default: true
    },
    ismemberIsShow: {
      type : Boolean,
      default: true
    },
    customPropertyWX: {
      type : Boolean,
      default: true
    },
    customPropertyIsShow: {
      type : Boolean,
      default: true
    },

    fixed:{
      type:Boolean,
      require: false,
      default: true
    },
    cancelSelect: {},
    activeItem: {
        type : Object
    }
   },
   data() {
     return {
       activeIndex: false,
       isHideShowCover: true,
       optionsListObject:'',
       optionsListValues: [],
       dateOptions : [],
       thirdActiveColumn: [],
       filterData: {},
       isOpened: false,
       data: {},
       defaultSecondActiveColumn: {},
       insertTime:{start_time: '', end_time: ''},
     }

   },
   components : {
     dropdownOption
   },

   methods: {
    changeThirdColumn (thirdActiveColumn) {
      this.thirdActiveColumn = thirdActiveColumn
      this.optionsListObject.thirdActiveColumn = thirdActiveColumn
    },
    cancel () {
      this.optionsListObject = ''
      this.activeIndex = false
      this.isOpened = false
      hideFilter()
    },
    confirm () {
      this.isOpened = false
      this.activeIndex = false
      hideFilter()
      console.log('this.getData()', this.getData())
      this.$emit('change-filter', this.filterOptions, this.getData());
    },
    showOption(optionsListObject, index) {
      console.log(optionsListObject.options)
      if(this.activeIndex === index) {
        if(this.optionsListObject === optionsListObject) {
          this.optionsListObject = ''
        }
        this.activeIndex = false
        this.isOpened = false
        this.$store.commit(HIDE_COVER);//关闭遮盖层
        // console.debug('top-filter:self-click-close')
      } else {
         if(optionsListObject.options) {
           this.defaultSecondActiveColumn = ''
           this.optionsListObject = ''
           setTimeout(() => {
             this.optionsListObject = optionsListObject;
             if (optionsListObject.secondActiveColumn) {
              if (optionsListObject.secondActiveColumn.checked === optionsListObject.thirdActiveColumn.parentId) {
                this.thirdActiveColumn = optionsListObject.thirdActiveColumn
                this.data = {[this.thirdActiveColumn.name]: this.thirdActiveColumn.checked}
              } else {
                delete optionsListObject.thirdActiveColumn
                this.thirdActiveColumn = ''
                this.data = {}
              }
            }
           })
           this.$store.commit(SHOW_COVER);//打开遮盖层
           this.isOpened = true
           // console.debug(JSON.stringify(optionsListObject))
           // console.debug('top-filter:self-click-open')
         } else {
          //  this.optionsListObject = ''
          //  this.$store.commit(HIDE_COVER);//关闭遮盖层
          //  this.isOpened = false
           // console.debug('top-filter:no-options')
         }
         this.activeIndex = index
      }
      this.defaultSecondActiveColumn = ''
      this.$emit('item-selected', optionsListObject, index);
    },

     changeFilterValue(optionsListObject){
        // console.log('topFilter:changeFilterValue')
        this.filterOptions[this.activeIndex] = optionsListObject;
        // this.isOpened = false
        // console.debug('top-filter:changeFilterValue', JSON.stringify(optionsListObject.options))
        // console.debug('top-filter:changeFilterValue')
     },
     changeData (data) {
       console.log('data', data)
       this.data = Object.assign({}, this.data, data)
     },
     changeTime (data) {
       console.log('data', data)
       this.insertTime = data
       this.data = Object.assign({}, this.data, data)
       console.log(this.data, 'data')
     },
     getFilterData () {
       var submitData = Object.assign({}, this.filterData)
       //console.log(JSON.stringify(this.filterOptions), 'getData object')
       this.filterOptions.forEach((object, index) => {
         if (object.options) {
           object.options.forEach((secObject, secIndex) => {
            //  if (secObject.value === object.checked) {
               if (secObject.options) {
                 //console.log('secObject.options', JSON.stringify(secObject))
                 secObject.options.forEach((rdObj, rdIndex) => {
                   if (secObject.checked === rdObj.value) {
                     submitData[secObject.name] = secObject.checked
                     const others = {value: secObject.value}
                     if (secObject.value === object.checked) {
                       if (!submitData[object.name]) submitData[object.name] = {
                         ...others,
                        data: [rdObj]
                       }
                       else submitData[object.name].data.push(Object.assign({value: rdObj.value, text: rdObj.text}))
                     }}
                 })
               } else {
                 submitData[object.name] = object.checked
               }
            //  }
           })
         }
       })
       return submitData
     },
     getData () {
       let submitData = {}
       let filterData = this.getFilterData(this.filterOptions, submitData)
       return Object.assign({}, filterData, this.data)
     },
     iteratorExtract (data, params) {
       data.options.forEach((item, index) => {
         params[data.name] = data.checked
         if (item.options) this.iteratorExtract(item, params)
       })
     },
     load (elem) {
        // console.debug(JSON.stringify(elem))
        this.$emit('load-more', elem)
     },

     mparseInt(numeric) {
       let value = parseInt(numeric)
       return value
     },

     whichShow(filter, index) {

       let showType = ''

       if(filter.options || filter.showArrow) {
         if(this.activeIndex !== index) {
           showType = 'up'
         } else {
           showType ='down'
         }
       } else {
         showType ='none'
       }

       return showType
     },

     onItemClick (hasChild) {
       if (hasChild === false) {
        //  hideFilter()
        //  this.activeIndex = ''
       }
     }
   },

   watch: {
    isShowCover(value) {},
    activeItem (options) {
      console.debug(JSON.stringify(options))
      this.defaultSecondActiveColumn = options
    },
    cancelSelect (status) {
      if (status === true) {
        this.cancel()
      }
    }
   },

   computed: {
     isShowCover () {
       return this.$store.state.app.isShowCover
     },
//     defaultSecondActiveColumn () {
//       return this.activeItem
//     }
   },
   mounted () {
     this.isHideShowCover = !this.$store.state.app.isShowCover
   }

  }
</script>

<style lang="less">
  @import '../less/index.less';

  .top-filter-bar{

    &:not(.fixed) {
      position: absolute;
    }

    &.fixed {
      position: fixed;
    }

    top:0;
    left:0;
    z-index: 102;
    width: 100%;
    background-color: white;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none; user-select:none;

    .up-ico {
      display: inline-block;
      background: url("@{host}/up-ico.png?12") no-repeat 0 0;
      width: 10px;
      height: 10px;
      background-size: 100%;
    }

    .down-ico{
      display: inline-block;
      background: url("@{host}/down-ico.png?12") no-repeat 0 0;
      width: 10px;
      height: 10px;
      background-size: 100%;
      vertical-align: bottom;
      margin-bottom: 11px;
    }


    .top-filter-body{
      position: relative;
      width: 100%;
      display: flex;

      height: @top-filter-size;
      line-height: @top-filter-size;
      border-bottom: 1px solid #EDEDED;
    }

    .filter-column-text {
      width: 82%;
      text-overflow: ellipsis;
      float: left;
      white-space: nowrap;
      overflow: hidden;
    }

    .filter-column {
      float: left;
      flex: 1;
      padding-left: 10px;

      .up-ico {
        float: left;
        margin-top: 16px;
      }

      .down-ico {
        float: left;
        margin-top: 16px;
      }
      // table-layout: fixed;
      // display: table-cell;

      &.txt-indent{
        text-indent: 18px;
      }

      &.txt-center{
        text-align: center;
      }

       &.bdr{
        border-right: 1px solid #EDEDED;
       }

       &.width-20{
         width: 22%;
       }

       &.width-25{
         width: 25%;
         flex:initial;
       }
    }
  }

  .top-filter-buttons {
    // bottom: 0;
    // left: 0;
    width: 100%;
    display: flex;

    // padding-top: 100px;
    // z-index: 102;



    &.fixed {
      position: fixed;
    }

    button {
      flex: 1;
      text-align: center;
      padding: 10px;
    }

    .cancel-button {
      border: none;
      border-top: 1px solid #eeeeee;
      background-color: white;
    }

    .confirm-button {
      color: white;
      border-top: 1px solid @normal-btn-color;
      border: none;
      background-color:  @normal-btn-color;
    }
  }


</style>
